<template>
  <el-form :model="ruleBankForm" :rules="rules" ref="ruleBankForm" label-width="120px" class="demo-ruleForm">
    <el-form-item label="开户行" prop="bankName">
      <el-input v-model="ruleBankForm.bankName"></el-input>
    </el-form-item>
    <el-form-item label="卡号" prop="bankAcount">
      <el-input v-model="ruleBankForm.bankAcount"></el-input>
    </el-form-item>
    <el-form-item label="持卡人姓名" prop="bankAccountName">
      <el-input v-model="ruleBankForm.bankAccountName"></el-input>
    </el-form-item>
    <el-form-item label="银行绑定电话" prop="phone">
      <el-input v-model="ruleBankForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="开户地址" prop="bankAddr">
      <el-input v-model="ruleBankForm.bankAddr"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="rowState">
      <el-radio-group v-model="ruleBankForm.rowState">
        <el-radio label="1">启用</el-radio>
        <el-radio label="0">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleBankForm')"
                 :loading="submitStatus">确定
      </el-button>
      <el-button @click="resetForm('ruleBankForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import * as types from '../../store/mutations-type'
  import api from '../../store/api'
  import axios from 'axios'
  var format = require('../../util/util')
  export default {
    data () {
      return {
        handle: 'add',
        submitStatus: false,
        rules: {
          bankName: [
            {required: true, message: '请请输入开户行', trigger: 'blur'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ],
          bankAcount: [
            {required: true, message: '请输入卡号', trigger: 'blur'},
            {pattern: /(^[0-9]{15,20}$)/, message: '请输入正确的银行卡号', trigger: 'change'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ],
          bankAccountName: [
            {required: true, message: '请输入持卡人姓名', trigger: 'blur'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ],
          phone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            {pattern: /^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/, message: '请输入正确的手机号码'}
          ],
          bankAddr: [
            {required: true, message: '请输入开户地址', trigger: 'blur'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ],
          rowState: [
            {required: true, message: '请选择状态', trigger: 'change'}
          ]
        }
      }
    },
    props: ['formType', 'getTableData', 'id', 'ruleBankForm'],
    methods: {
      submitForm (formName) {
        this.submitStatus = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var ruleBankForm = this.ruleBankForm
            ruleBankForm = format.formatString(ruleBankForm)
            axios.post(api.bankAdd + '?' + ruleBankForm).then(response => {
              var result = response.data
              if (result.success) {
                this.$message({
                  message: '银行卡绑定成功',
                  type: 'success'
                })
                this.submitStatus = false
                this.$store.dispatch(types.SUPPLIER_CLOSE_FORM)
                this.resetForm(formName)
              } else {
                this.submitStatus = false
                this.$message.error({
                  title: '错误',
                  message: result.message
                })
              }
              this.getTableData()
            }, (err) => {
              this.$message.error({
                title: '错误',
                message: err.response.data.message
              })
              this.submitStatus = false
            })
          } else {
            this.submitStatus = false
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    mounted () {
    }
  }
</script>
<style>
  .demo-ruleForm {
    width: 440px;
  }
</style>

